<template>
  <div ref="cart">
    <!-- @click="ViewCart(false)" -->
    <div class="" :class="{'blackscreen':showScreen}" >
    </div>
      <div class="cartWrapper">
        <!-- 插槽1 -->
        <slot></slot>
        
        <div class="cart_slot_1">
          <div class="title_cartBox">
            <div class="title_cart_content">
              <div class="logo_info_title_cart_content">
                <img class="img_logo_info_title" src="/static/iconlogo/rightIcon.png" alt="">
                </div>
              <span class="info_title_cart_content">已加入购物车</span>
            </div>

            <div class="title_cart_closeBtn">
              <img class="closeBtnImg" src="/static/iconlogo/cartclose.png" alt="" @click="ViewCart(1,0)">
            </div>
          </div>~

          <div class="cartInfoBox">
            <div class="cartInfo_content">
              <div>
                <img class="cartInfo_img" :src="'/static/gd/'+goodsDetails.imgLink" alt="">
              </div>
              <div class="cartInfo_detail">
                 <div style="padding: 2px;">
                    <div class="cardTag">
                    </div>
                    <div class="oNcard_info">
                      <div class="oNcard_info_one">{{goodsDetails.gname}}</div>
                      <div class="oNcard_info_two">{{goodsDetails.goodsSize}}</div>
                    </div>
                    <div class="oNcard_bottom">
                      <div class="oNcard_info_price">￥{{goodsDetails.gprice}}</div>
                      <!-- <el-button type="text" class="button">操作按钮</el-button> -->
                    </div>
                  </div>
              </div>
            </div>
          </div>
          <div class="btn_cartBox">
            <button class="btn_viewCart" @click="ViewCart(goodsDetails.gid,1)">
              查看购物车 </button>
            <button class="btn_cart_bill" @click="ViewCart(goodsDetails.gid,2)">
              结算 </button>
          </div>
          
        </div>
       
      </div>
  </div>
</template>

<script>
export default {
  props:{
    goodsDetails: {
	      type: Object,
	      default () {
	        return {}
	      }
	    },
  }, //传递参数
  inheritAttrs: false,
  name: 'dropCart',
  data () {
    return {
      msg: '',
      showScreen:true,
      
    }
  },
  methods: {
    // 传递给父组件
    ViewCart(data,num){
     console.log(data);
      if(num == 1){
        // this.$emit('submitToParent', data) //传回父组件
        //转到购物车 根据用户id 查询购物车列表
        // this.$router.push('/cart');
        const uuid = JSON.parse(sessionStorage.userInfo);
        localStorage.setItem('userId',uuid.id);
        this.$router.push({
          name:'cartPage',
          params:{userId:uuid.id}  //需要获取一个userId
        });


        //   this.$router.push({
        //   name:'detail',
        //   params:{goodsId:val}
        // })

      }else if(num == 2){
        // this.$emit('submitToParent', data)
        setTimeout(() => {
          //结算 直接生成订单
          this.$router.push('/checkout');
        }, 500);
      }else if(num == 0){
        this.$emit('closeBox')
        
      }
     
    }
  },
  mounted () {

  }
}
</script>

<style scoped>
.blackscreen{
    overflow: hidden;
    z-index: 11;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    visibility: visible;
    transition: .8s;
    /* 背景 */
    /* -webkit-backdrop-filter:saturate(150%) blur(4px); */
   /* opacity: 0.4; */
    /* backdrop-filter: blur(4px); */
    animation: blackDetails 300ms;
    animation-fill-mode: forwards;
}
@keyframes blackDetails{
  form{
      background-color: rgba(0, 0, 0,0.4);
  }
  to{
     background-color: rgba(0, 0, 0,0.6);
  }
}
.cartWrapper{
  position: fixed;
  right: 30px;
  animation: cartAnimation 300ms;
  animation-fill-mode: forwards;
  background: rgb(255,255,255);
  z-index: 11;
  width:370px;
  /* border:1px solid red; */
}
@keyframes cartAnimation{
    from{
      top: -160px;
    }
    to{
     top: 85px;
    }
}
.title_cartBox{
  /* border: 1px solid rgb(19, 143, 209); */
  height: 40px;
}
.title_cart_content{
  position: relative;
  display: flex;
  width: 300px;
  margin-top: 15px;
  left: 12px;
  /* border: 1px solid rgb(20, 58, 197); */
}
.logo_info_title_cart_content{
  /* vertical-align: middle; */
  position: relative;
  left: 11px;
  top: 3px;
  width: 23px;
  height: 22px;
  /* border: 1px solid springgreen; */
}
.img_logo_info_title{
   width: 13px;
   height: 13px;
}
.info_title_cart_content{
   /* border: 1px solid springgreen; */
  position: relative;
  left: 7px;
  width: 150px;
  font-weight: 520;
  font-size: 15px;
}
/* 关闭x */
.title_cart_closeBtn{
  position: absolute;
  right: 24px;
  top: 15px;
}
.title_cart_closeBtn .closeBtnImg{
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* 中间部分 商品详细信息 */
.cartInfoBox{
  /* border: 1px solid rgb(224, 71, 6); */
  height: 120px;
  padding: 0px 20px 0px 20px;
}
.cartInfo_content{
  position: relative;
  height: inherit;
  width: inherit;
  display: flex;
  /* border: 1px solid rgb(65, 5, 206); */
}
.cartInfo_content .cartInfo_img{
  position: relative;
  width: 110px;
  height: 115px;
}
.cartInfo_content .cartInfo_detail{
  margin-left: 12px;
  position: relative;
  width: 250px;
  height: auto;
  /* border: 1px solid red; */
}
.oNcard_info{
    /* margin-top: 10px; */
    line-height:18px;
}
.oNcard_info .oNcard_info_one{
  /* width: 220px; */
  /* border: 1px solid rgb(108, 177, 55); */
  font-size: 16px;
  color: #090909;
  /* font-weight: 800px; */
   letter-spacing: -0.05em;
}

.oNcard_info .oNcard_info_two{
  /* width: 220px; */
  margin-top: 12px;
  margin-bottom: 5px;
  font-size: 14px;
  color: #aaacae;
  font-weight: 500px;
}
.oNcard_bottom {
  /* border: 1px solid red; */
  padding: 0;
  float: left;
  margin-top: 15px;
  margin-bottom: 15px;
  line-height: 12px;
}
.oNcard_info_price{
  font-size: 18px;
  letter-spacing: -0.06em;
}

.cart_slot_1{
    /* border: 1px solid red; */
    height: auto;
}
.btn_cartBox{
    width: 100%;
    position: relative;
    margin-top: 8px;
    margin-bottom: 10px;
}
.btn_viewCart{
    margin-left: 20px;
    min-height: 60px;
    min-width: 160px;
    /* padding: 18px 24px; */
    border-radius: 50px;
    border: 1.5px solid transparent;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: 0 0;
    color: #111;
    border-color: #ccc;
    cursor: pointer;
    font-size: 17px;
    transition: .2s;
    font-weight: 500;
}
.btn_viewCart:hover{
  border-color: rgb(94, 94, 94);
}
.btn_cart_bill{
    /* width: 100%; */
     /* margin-bottom: 10px; */
    margin-left: 10px;
    min-height: 60px;
     min-width: 160px;
    border-radius: 50px;
    /* border: 4px solid #fff; */
    /* border: 5px solid transparent; */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #111;
    color: #fff;
    cursor: pointer;
    font-size: 17px;
    font-weight: 500;
    transition: .2s;
}
.btn_cart_bill:hover{
    background: rgb(47, 44, 44);
    /* border: 10px transparent; */
    /* border: 1px solid transparent; */
    /* border: 1px solid #fff; */
    color: rgb(255, 254, 254);
}

</style>
